<!DOCTYPE html>
<html lang="en">
<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="x-admin/css/font.css">
    <link rel="stylesheet" href="x-admin/css/xadmin.css">
    <script type="text/javascript" src="x-admin/js/jquery.min.js"></script>
    <script src="x-admin/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="x-admin/js/xadmin.js"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>
        .image-list {
            width: 400px;
            min-height: 150px;
        }

        .image-group {
            height: 100px;
            width: 100px;
            margin: 10px 10px 10px 0;
            position: relative;
            border: 1px solid gray;
            float: left;
        }

        .image-group .image-div {
            height: 100%;
            width: 100%;
            overflow: hidden;
        }

        .image-group .image-div .image {
            height: 100%;
            width: 100%;
            position: absolute;
        }

        .image-group .image-div .image img {
            display: block;
            height: 100%;
            width: 100%;
        }

        .image-group .image-div .opt {
            height: 100%;
            width: 100%;
            background-color: rgba(0, 0, 0, .3);
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .image-group .image-div .opt .iconfont {
            font-size: 26px;
            color: white;
            cursor: pointer;
            margin: 10px;
        }
    </style>
</head>
<body>
<div style="width: 90%;margin: 0 30px 0 auto">
    <form id="edit" lay-filter="edit" class="layui-form">
        <input type="hidden" name="id" id="id" value="<%= car.id %>">
        <div class="layui-form-item">
            <label class="layui-form-label" for="car_no"><span class="x-red">*</span>车牌号</label>
            <div class="layui-input-block">
                <input type="text" name="car_no" id="car_no" placeholder="请输入车牌号" autocomplete="off"
                       value="<%= car.car_no %>" lay-verify="required" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" for="color">颜色</label>
            <div class="layui-input-block">
                <input type="text" name="color" id="color" placeholder="请输入颜色" autocomplete="off"
                       value="<%= car.color %>" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" for="frame_number"><span class="x-red">*</span>车架号</label>
            <div class="layui-input-block">
                <input type="text" name="frame_number" id="frame_number" placeholder="请输入车架号" autocomplete="off"
                       value="<%= car.frame_number %>" lay-verify="required" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" for="car_status">车辆状态</label>
            <div class="layui-input-block">
                <select name="car_status" id="car_status" lay-filter="car_status">
                    <option value="1">正常</option>
                    <option value="2">维修</option>
                    <option value="3">保养</option>
                    <option value="4">借用</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" for="brand_id">品牌</label>
            <div class="layui-input-block">
                <select name="brand_id" id="brand_id">

                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" for="mileage"><span class="x-red">*</span>里程</label>
            <div class="layui-input-block">
                <input type="text" name="mileage" id="mileage" placeholder="请输入里程" autocomplete="off"
                       lay-verify="required"
                       value="<%= car.mileage %>" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" for="driver_license"><span class="x-red">*</span>行驶证</label>
            <div class="layui-input-block">
                <input type="hidden" name="driver_photo" id="driver_photo" value="<%= car.driver_photo %>"
                       class="layui-input">
                <button type="button" id="uploadLicense" class="layui-btn">上传行驶证</button>
                <div class="image-list">
                    <div class="image-group">
                        <div class="image-div" id="licenseImage">
                            <div class="image">
                                <img src="" alt="">
                            </div>
                            <div class="opt">
                                <i class="iconfont delete">&#xe69d;</i>
                                <i class="iconfont show" type="licenseImage">&#xe6ac;</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" for="car_image">车辆照片</label>
            <div class="layui-input-block">
                <input type="hidden" name="car_image" id="car_image" value="<%= car.car_image %>"
                       class="layui-input">
                <button type="button" id="uploadCarImage" class="layui-btn">上传照片</button>
                <div class="image-list" id="carImageListDiv">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" for="status">状态</label>
            <div class="layui-input-block">
                <select name="status" id="status">
                    <option value="1">可用</option>
                    <option value="2">禁用</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <button class="layui-btn" type="submit" lay-submit lay-filter="submitBtn">提交</button>
            </div>
        </div>
    </form>

</div>
</body>
<script>
    let car_image = [];

    function initImageStyle() {
        $(".opt").hide();
        /*控制图片操作层*/
        $(".image-div").mouseenter(function () {
            $(this).find(".opt").show();
        }).mouseleave(function () {
            $(this).find(".opt").hide();
        });
        /*绑定预览图片的事件*/
        $(".show").click(function () {
            let src = $(this).parents(".image-group").find("img").prop("src");
            layer.open({
                type: 1,
                title: "图片预览",
                content: '<img style="display: block;height: 100%;width: 100%;" src="' + src + '">',
                area: ["500px", "500px"]
            });
        })
        /*绑定删除图片的事件*/
        $(".delete").click(function () {
            layer.confirm("确定删除该图片吗？", {icon: 3}, index => {
                $(this).parents(".image-group").find(".image-div").hide().find("img").prop("src", "");
                $(this).parents(".layui-input-block").find("input").val("");
                layer.close(index);
            });
        });

        $(".del").click(function () {
            layer.confirm("确定删除该图片吗？", {icon: 3}, index => {
                $(this).parents(".image-group").remove();
                const fileName = $(this).parents(".image-group").find("img").prop("alt");
                let imageIndex = -1;
                for (let i = 0; i < car_image.length; i++) {
                    if (fileName === car_image[i]) {
                        imageIndex = i;
                        break;
                    }
                }
                car_image.splice(imageIndex, 1);
                $("#car_image").val(car_image.toString());
                layer.close(index);
            });
        })
    }

    function initImage() {
        $html = '';
        for (const ci of car_image) {
            $html += '<div class="image-group"><div class="image-div" style="display: block"><div class="image"><img src="upload/' + ci + '" alt="' + ci + '"></div><div class="opt"><i class="iconfont del">&#xe69d;</i><i class="iconfont show" type="licenseImage">&#xe6ac;</i></div></div></div>'
        }
        $("#carImageListDiv").empty().append($html);
        initImageStyle();
        $("#car_image").val(car_image.toString());
    }

    layui.use(["form", "upload"], function () {
        const {form, upload} = layui;

        /*获取状态值*/
        let status = "<%= car.status %>";
        let car_status = "<%= car.car_status %>";

        /*更新修改时下拉框的值*/
        if (status) {
            $("#status").val(status);
            $("#car_status").val(car_status);
            /*在layui中通过js更新select的值后，必须调用form.render去重新渲染*/
            form.render();
            $(".image-div").show();
            let driver_photo = $("#driver_photo").val();
            $("#licenseImage").find("img").prop("src", "upload/" + driver_photo);

            /*修改时发送请求获取汽车的图片信息*/
            $.ajax({
                url: "car/image/<%= car.id %>",
                method: "get",
                success(res) {
                    car_image = res.data.map(item => item.image)
                    initImage()
                }
            })

        } else {
            $(".image-div").hide();
        }

        initImageStyle();


        /*渲染驾照上传组件*/
        upload.render({
            elem: "#uploadLicense",
            url: "/upload",
            accept: "images",/*限制类型*/
            acceptMime: "images",/*限制选择框*/
            exts: "png|jpg|jpeg|gif",/*支持的后缀*/
            done(res) {
                if (res.code === 200) {
                    $("#licenseImage").show().find("img").prop("src", "upload/" + res.data);
                    $("#driver_photo").val(res.data)
                } else {
                    layer.error("上传失败！");
                }
            }
        });
        upload.render({
            elem: "#uploadCarImage",
            url: "/upload",
            done: res => {
                if (res.code === 200) {
                    car_image.push(res.data)
                    initImage()
                }
            }
        });
        /*获取品牌列表*/
        $.ajax({
            url: "brand/select",
            method: "get",
            dataType: "json",
            success(res) {
                if (res.code === 200) {
                    const list = res.data;
                    const brand = $("#brand_id");
                    let $html = "";
                    for (const d of list) {
                        if (d.status === 2) {
                            $html += '<option disabled value="' + d.id + '">' + d.brand_name + '</option>';
                        } else {
                            $html += '<option value="' + d.id + '">' + d.brand_name + '</option>';
                        }

                    }
                    brand.append($html);
                    let brand_id = "<%= car.brand_id %>";
                    if (brand_id) {
                        $("#brand_id").val(brand_id);
                    }
                    form.render();
                }
            }
        });
        /*监听提交*/
        form.on("submit(submitBtn)", function ({field}) {
            let url = "";
            if (field.id) {
                url = "car/update";
            } else {
                url = "car/save";
            }
            $.ajax({
                url,
                data: field,
                method: "post",
                dataType: "json",
                success(res) {
                    if (res.code === 200) {
                        layer.msg((field.id ? "修改" : "添加") + "成功", {icon: 6}, function () {
                            const index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                            parent.table.reload("dataList")
                        });
                    } else {
                        layer.alert(res.msg, {icon: 5});
                    }
                }
            });
            return false;
        });
    });
</script>
</html>
